<template>
  <div class='photo-list'>
    <!-- tabs无法拿到id，使用插槽 -->
    <van-tabs>
      <van-tab
        v-for="item in imgCates"
        :key="item.id"
      >
        <!-- <van-image
          width="100"
          height="100"
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <van-image
          width="10rem"
          height="10rem"
          fit="contain"
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <van-image
          round
          width="10rem"
          height="10rem"
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <van-image
          width="100"
          height="100"
          lazy-load
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        /> -->
        <template #title>
          <div @click="getImages(item.id)">
            {{item.title}}
          </div>
        </template>
        <div class="imgBox">
          <img
            v-for="image in images"
            :key="image.id"
            v-lazy="image.img_url"
            alt=""
            @click="godetail('/home/photolist/photoinfo',image.id)"
          >
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
// import mixins from "../../../mixins"
export default {
  // mixins: [mixins],
  data: () => ({
    imgCates: [],
    images: []
  }),
  methods: {
    async getImgCategory() {
      const res = await this.$http.getImgCategory();
      // console.log(res);
      //对后台数据进行处理，加入全部
      res.data.message.unshift({
        id: 0,
        title: '全部'
      })
      this.imgCates = res.data.message

    },
    async getImages(myid) {
      //默认第一个参数是name,代表标识符，也就是key
      //第二个参数是title
      // console.log(myid);
      // Array.from(args).forEach(el => {
      //   console.log(el);
      // });
      const res = await this.$http.getImages(myid);
      // console.log(res);
      this.images = res.data.message
    },
    // godetail(id) {
    //   console.log(id);
    //   this.$router.push("/home/photolist/photoinfo/" + id)
    // }
  },
  created() {
    this.getImgCategory();
    this.getImages(0)
  }
}
</script>
<style lang="scss" scoped>
.photo-list {
  .imgBox {
    img {
      width: 100%;
      height: 100%;
      padding: 4px;
    }
  }
}
</style>